<template>
	<div class="shopMessage">
		<div class="shopMsg-head">

			<img :src="'/taobao/'+ shopLists.shopImg" alt="" />
			<ul class="shopMsg-ul">
				<li class="shopMsg-li">
					<div class="shopMSg-cont">
						<h3 style="color: #555;font-size: 15px;">{{shopLists.title}}</h3>
						<div style="color: orangered;">
							¥ <span class="price">{{shopLists.price}}</span>
							<span class="tuijian"> 超市推荐</span>
						</div>
						<div class="shopMsg-cuxiao">
							<span style="color: #fff;opacity: 0.6; background: #E64545;">促销:</span> {{shopLists.manjian}}
							<span class="shopMsg-month">月销量 {{shopLists.monNum}}件</span>
							<span class="shopMsg-address">{{shopLists.address}}</span>
						</div>
					</div>
				</li>
			</ul>
			<div class="shopMsg-jifen" @click="btn">
				<div class="jifen">
					<p>
						<span class="jifen1">积分</span>
						<span style=" color: #666;"> 购买可获得25积分</span>
						<span class="jifen-rig">...</span>
					</p>
				</div>
			</div>
			<transition name="fade">
				<div v-show="show" class="showJifen">
					<div class="show-jifen">
						<p>
							<span class="jifen1">积分</span>
							<span> 购买可获得25积分</span>
						</p>
						<button @click="btn">确定</button>
					</div>
				</div>
			</transition>

			<div class="shopMsg-jifen" @click="btn1">
				<div class="jifen">
					<p class="youhui">
						<span class="juan">满88包邮</span> ·
						<span> 一站式购齐</span> ·
						<span> 正品保证</span>
						<span class="jifen-rig">...</span>
					</p>

				</div>
			</div>
			<transition name="fade">
				<section class="advantage-service" v-show="show1">
					<h5>基础保障</h5>
					<dl>
						<dt><img src="//img.alicdn.com/tps/i3/TB1yuz5LFXXXXaUXpXX1ElnIXXX-64-64.png">满88包邮</dt>

						<dd>单笔订单20kg(含)以内，且实付订单金额 ≥88元免运费</dd>

						<dt><img src="//img.alicdn.com/tps/i1/TB1SuD2LFXXXXbRXpXX1ElnIXXX-64-64.png">一站式购齐</dt>

						<dd>超市万件商品随心挑，一站式购物体验</dd>

						<dt><img src="//img.alicdn.com/tps/i4/TB1rUHSLFXXXXbDXVXX1ElnIXXX-64-64.png">正品保证</dt>

						<dd>该商品由中国人保承保正品保证险</dd>

						<dt><img src="//img.alicdn.com/tps/i4/TB1gWLULFXXXXXqXFXX1ElnIXXX-64-64.png">七天无理由退换</dt>

						<dd>消费者在满足7天无理由退换货申请条件的前提下，可以提出“7天无理由退换货”的申请</dd>

						<dt><img src="//img.alicdn.com/tps/i1/TB1USzOLFXXXXbpXVXX1ElnIXXX-64-64.png">极速退款</dt>

						<dd>极速退款是为诚信会员提供的退款退货流程的专享特权，额度是根据每个用户当前的信誉评级情况而定</dd>

					</dl>
					<button @click="btn1">确定</button>
				</section>
			</transition>

			<div class="shopMsg-quality">
				<div class="quality-wrap"  >
					<h4 style="color: #666;padding: 0 10px;">商品评价({{shopLists.comments.length}})</h4>
					<div class="quality" v-show="xian" v-for="items in shopLists.comments">
						<img src="../assets/11.jpg" alt="" />
						<span>{{items.buyer}}</span>
						<p style="color: #666;font-size: 13px;">
							{{items.content}}
						</p>
						<span class="time">{{items.time.day}}</span>
					</div>

				</div>
			</div>
		</div>
		<div class="shopHome">
			<div class="homeName">
				<img src="../assets/16.jpg" alt="" />
				<p class="dianzhu">{{shopLists.author}}</p>
				<ul class="homeName-ul">
					<li>
						
						<a class="allshops" :href="'#/sellershop/'+shopLists.author">
							
							<span>全部宝贝</span>
						</a>
					</li>
					<li>
						
						<span @click="guanzhu()">关注</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="shopMsg-foot">
			<ul class="foot-ul">
				<li>
					<a href="#">
						<i class="fa fa-user-circle-o"></i> 客服
					</a>
				</li>
				<li>
					<a style="border-right: none;border-left: none;" :href="'#/sellershop/'+shopLists.author">
						<i class="fa fa-home"></i> 进店
					</a>
				</li>
				<li>
					<a href="#/guanzhu">
						<i class="fa fa-star-o"></i> 关注
					</a>
				</li>
				<li>
					<a style="cursor: pointer;" class="foot-ul-li-a" @click="joingou">加入购物车</a>
				</li>
			</ul>

		</div>
		<transition name="fade">
			<div class="joingou-wrap" v-show="joingouShow">
				<div class="joingou-main">
					<img :src="/taobao/+shopLists.shopImg" alt="" />
					<span>{{shopLists.title}}</span>
					<p>¥ {{shopLists.price}}</p>
					<span>库存:{{shopLists.monNum}}件</span>

				</div>
				<div class="enter">
					<button class="quxiao" style="float: left;" @click="joingou">取消</button>
					<a @click="fasong">确定</a>
				</div>
			</div>
		</transition>
	</div>

</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				shopLists: [],
				show: false,
				show1: false,
				xian: true,
				joingouShow: false,
				guanzhus:false,
				comments:[]
			}
		},
		mounted() {
			this.choose()

		},
		methods: {
			choose() {
				var that = this;
				var id = this.$route.params.id;
				//				console.log(id)
				axios.post('/taobao/shopmsg/' + id).then(function(result) {
					//					console.log(result);
					var res = result.data;
					//					console.log(res);
					that.shopLists = res.data;
				})

			},
			guanzhu(){
				this.guanzhus = !this.guanzhus;
				console.log(this.guanzhus)
				var that = this ;
				var shop = that.shopLists;
				
				if(this.guanzhus ===true){
					alert('关注商品成功')
					 axios.post('/taobao/guanzhu',{
					 	shop
					 }).then(function(result){
				 		
					 })
				}else{
					alert('取消关注商品');
					axios.post('/taobao/quxiaoguanzhu',{shop}).then(function(result){
						
					})
				}
			},

			btn() {
				this.show = !this.show;
			},
			btn1() {
				this.show1 = !this.show1;
			},		
			btnClick() {
				this.xian = !this.xian;
			},
			joingou() {
				this.joingouShow = !this.joingouShow;
			},
			
			fasong() {
				var that = this;
				var id = this.$route.params.id;
				//				console.log(id)
				axios.post('/taobao/shopCart/' + id).then(function(result) {
					console.log(result);
					var res = result.data;
					if(res.error == 0) {
						location.href = "#/shopcart"
					}
				})
			}
		}
	}
</script>

<style scoped="">
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .6s
	}
	
	.fade-enter,
	.fade-leave-to {
		opacity: 0
	}
	
	.shopMessage {
		width: 360px;
		background: #eee;
		margin-bottom: 130px;
	}
	
	.shopMessage img {
		margin-left: 3px;
		width: 350px;
		height: 300px;
		border: solid 1px #ccc
	}
	
	.shopMsg-ul {
		width: 360px;
		text-align: left;
		overflow: hidden;
		background: #fff;
	}
	
	.tuijian {
		border: solid 1px red;
		border-radius: 5px;
		padding: 1px 3px;
		font-size: 13px;
		opacity: 0.6;
	}
	
	.price {
		font-weight: 600;
		font-size: 20px;
	}
	
	.shopMSg-cont {
		padding: 0 15px;
	}
	
	.shopMsg-cuxiao {
		color: #888;
		margin: 5px 0;
		font-size: 15px;
	}
	
	.shopMsg-address {
		float: right;
	}
	
	.shopMsg-month {
		margin-left: 15px;
	}
	
	.shopMsg-jifen {
		margin: 10px 0;
		padding: 0 10px;
		background: #fff;
		line-height: 40px;
		cursor: pointer;
	}
	
	.jifen1 {
		color: red;
		font-size: 12px;
	}
	
	.jifen-rig {
		float: right;
	}
	
	.youhui {
		font-size: 14px;
	}
	
	.youhui span {
		margin: 0 5px;
		color: #555;
	}
	
	.youhui .juan {
		margin-left: 0;
	}
	
	.showJifen {
		width: 360px;
		background: #fff;
		height: 340px;
		position: absolute;
		bottom: 0px;
		z-index: 1000;
		padding-top: 15px;
		border: solid 1px #ccc;
	}
	
	.show-jifen {
		height: 330px;
		position: relative;
	}
	
	button {
		position: absolute;
		bottom: 0;
		width: 100%;
		line-height: 35px;
		background: orangered;
		color: #fff;
		font-size: 15px;
		border: none;
		cursor: pointer;
	}
	
	.advantage-service {
		position: absolute;
		z-index: 1000;
		font-size: 15px;
		height: 400px;
		bottom: 0;
		background: #fff;
		color: #555;
		margin-bottom: 20px;
	}
	
	.advantage-service dt {
		line-height: 0px;
		height: 20px;
		padding-top: 5px;
	}
	
	.advantage-service img {
		width: 15px;
		height: 15px;
		border: none;
		margin: 0 8px;
		display: inline-block;
	}
	
	.advantage-service h5 {
		text-align: center;
		font-size: 15px;
		color: #444;
	}
	
	.advantage-service dd {
		font-size: 14px;
		color: #999;
		padding: 0 30px;
	}
	
	.quality-wrap {
		background: #fff;
		height: 80px;
		
	}
	
	.quality-ul {
		text-align: center;
		background: #fff;
	}
	
	.quality-ul li {
		float: left;
		width: 100px;
		margin: 8px;
		background: pink;
		border-radius: 10px;
		height: 30px;
		line-height: 30px;
	}
	
	.quality-ul li span {
		font-size: 14px;
		color: #666;
		cursor: pointer;
	}
	
	.quality img {
		position: relative;
		top: 8px;
		left: 5px;
		margin-right: 5px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		
	}
	
	.quality {
		background: #fff;
		float: left;
		margin-top: 10px;
		height: 100px;
		width: 100%;
		border-bottom:solid 1px #eee ;
		
	}
	
	.quality p {
		padding: 10px;
	}
	
	.shopMsg-foot {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 1000;
	}
	
	.foot-ul li {
		float: left;
		text-align: center;
	}
	
	.foot-ul li a {
		border: solid 1px #ccc;
		padding: 0 23px;
		color: #888;
		background: #fff;
		display: inline-block;
		font-size: 15px;
		height: 53px;
		color: #795DA3;
	}
	
	.foot-ul li a i {
		font-size: 20px;
		display: block;
		padding-top: 5px;
	}
	
	.foot-ul li .foot-ul-li-a {
		background: orange;
		border: none;
		color: #fff;
		height: 55px;
		padding: 0 25px;
		line-height: 60px;
	}
	
	.shopHome {
		height: 130px;
		width: 100%;
		padding: 0 10px;
		line-height: 50px;
		overflow: hidden;
		background: #fff;
		border-top: solid 1px #eee;
		padding-top: 10px;
		margin-top: 115px;
	}
	
	.homeName img {
		width: 50px;
		height: 50px;
		float: left;
		margin-right: 15px;
		margin-bottom: 5px;
		
	}
	
	.homeName .dianzhu {
		font-size: 18px;
	}
	
	.homeName-ul {
		overflow: hidden;
		margin-top: 20px;
	}
	
	.homeName-ul li {
		float: left;
		border-right: solid 1px #ccc;
		width: 170px;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
		color: #555;
		font-size: 15px;
	}
	
	.homeName-ul li:last-child {
		border: none;
	}
	
	.homeName-ul li:hover {
		color: red;
	}
	
	.joingou-wrap {
		height: 50%;
		padding: 10px;
		background: #fff;
		border-top: solid 1px #ccc;
		position: absolute;
		bottom: -200px;
		width: 100%;
	}
	
	.joingou-main {
		line-height: 30px;
	}
	
	.joingou-main img {
		width: 100px;
		height: 100px;
		float: left;
		margin-right: 15px;
	}
	
	.joingou-main p {
		color: orange;
	}
	
	.enter .quxiao {
		width: 180px;
		left: 0;
		bottom: 15px;
		background: orange;
	}
	
	.enter a {
		position: absolute;
		bottom: 0;
		background: orangered;
		color: #fff;
		display: block;
		width: 180px;
		text-align: center;
		right: 20px;
		bottom: 15px;
		line-height: 35px;
	}
	.time{
		float: right;
		font-size: 14px;
		color: #888;
		padding-right: 10px;
	}
	.allshops{
		color: #666;
	}
	.allshops:hover{
		color: orangered;
	}
</style>